

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/HexoPage/img/favicon.jpeg">
  <link rel="icon" href="/HexoPage/img/favicon.jpeg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="xiaoaodi">
  <meta name="keywords" content="">
  
    <meta name="description" content="JavaScript学习笔记（第四部分）总共四部分9 事件9.1 事件对象当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存 12345678910">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript学习笔记（第四部分）总共四部分(完结)">
<meta property="og:url" content="http://xiao_aodi.gitee.io/hexopage/2022/03/21/js%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="~吃椰子灰的胖丁">
<meta property="og:description" content="JavaScript学习笔记（第四部分）总共四部分9 事件9.1 事件对象当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存 12345678910">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-03-21T07:11:44.997Z">
<meta property="article:modified_time" content="2022-03-21T07:13:12.041Z">
<meta property="article:author" content="xiaoaodi">
<meta name="twitter:card" content="summary_large_image">
  
  
  <title>JavaScript学习笔记（第四部分）总共四部分(完结) - ~吃椰子灰的胖丁</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/HexoPage/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"xiao_aodi.gitee.io","root":"/HexoPage/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/HexoPage/local-search.xml"};
  </script>
  <script  src="/HexoPage/js/utils.js" ></script>
  <script  src="/HexoPage/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/HexoPage/">
      <strong>Xiao_aodi</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>
   
      <!-- 天气网 -->
      


    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/HexoPage/img/wallhaven-wqve97.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript学习笔记（第四部分）总共四部分(完结)">
              
            </span>
            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      xiaoaodi
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-03-21 15:11" pubdate>
        2022年3月21日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      19k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      156 分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript学习笔记（第四部分）总共四部分(完结)</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2022年3月21日 下午
                
              </p>
            
            <div class="markdown-body">
              <h2 id="JavaScript学习笔记（第四部分）总共四部分"><a href="#JavaScript学习笔记（第四部分）总共四部分" class="headerlink" title="JavaScript学习笔记（第四部分）总共四部分"></a>JavaScript学习笔记（第四部分）总共四部分</h2><h3 id="9-事件"><a href="#9-事件" class="headerlink" title="9 事件"></a>9 事件</h3><h4 id="9-1-事件对象"><a href="#9-1-事件对象" class="headerlink" title="9.1 事件对象"></a>9.1 事件对象</h4><p>当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。</p>
<p>可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存</p>
<figure class="highlight html"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></div></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">           <span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="language-css">                <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>;    </span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-selector-id">#box2</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="language-css">                <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> =<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> box2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box2&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            box1.<span class="hljs-property">onmousemove</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">                event  = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> x = event.<span class="hljs-property">clientX</span>;</span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> y = event.<span class="hljs-property">clientY</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                box2.<span class="hljs-property">innerHTML</span> =<span class="hljs-string">&quot;x = &quot;</span>+x + <span class="hljs-string">&quot; , y = &quot;</span>+y;</span><br><span class="language-javascript">            &#125;;</span><br><span class="language-javascript">        &#125;;  </span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs html">//practice<br><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">90px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: rebeccapurple;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">                event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> st = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollTop</span> || <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">scrollTop</span>;</span><br><span class="language-javascript">			    <span class="hljs-keyword">var</span> sl = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollLeft</span> || <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">scrollLeft</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> left = event.<span class="hljs-property">clientX</span>;</span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> top = event.<span class="hljs-property">clientY</span>;</span><br><span class="language-javascript">                </span><br><span class="language-javascript">                <span class="hljs-comment">//设置div的偏移量</span></span><br><span class="language-javascript">                box1.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = left + sl + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">                box1.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = top + st + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>获取到鼠标的坐标</strong><br>clientX和clientY<br>用于获取鼠标在当前的可见窗口的坐标<br>div的偏移量，是相对于整个页面的</p>
<p>pageX和pageY 可以获取鼠标相对于当前页面的坐标<br>但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用<br>var left &#x3D; event.clientX;<br>var　top &#x3D; event.clientY;</p>
<h4 id="9-2-事件的冒泡（Bubble）"><a href="#9-2-事件的冒泡（Bubble）" class="headerlink" title="9.2 事件的冒泡（Bubble）"></a>9.2 事件的冒泡（Bubble）</h4><p>事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。<br>事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="language-css"></span><br><span class="language-css">			<span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellowgreen;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#s1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			</span><br><span class="language-css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> s1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;s1&quot;</span>);</span><br><span class="language-javascript">				s1.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是span的单击响应函数&quot;</span>);</span><br><span class="language-javascript">					event.<span class="hljs-property">cancelBubble</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//为box1绑定一个单击响应函数</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				box1.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是div的单击响应函数&quot;</span>);</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					event.<span class="hljs-property">cancelBubble</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//为body绑定一个单击响应函数</span></span><br><span class="language-javascript">				<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是body的单击响应函数&quot;</span>);</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br>			我是box1<br>			<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;s1&quot;</span>&gt;</span>我是span<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<p><strong>可以将事件对象的cancelBubble设置为true，即可取消冒泡</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="language-css"></span><br><span class="language-css">			<span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">				<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-css">				 * 开启box1的绝对定位</span></span><br><span class="hljs-comment"><span class="language-css">				 */</span></span><br><span class="language-css">				<span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-comment">//绑定鼠标移动事件</span></span><br><span class="language-javascript">				<span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> st = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollTop</span> || <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">scrollTop</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> sl = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollLeft</span> || <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">scrollLeft</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> left = event.<span class="hljs-property">clientX</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span>　top = event.<span class="hljs-property">clientY</span>;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					<span class="hljs-comment">//设置div的偏移量</span></span><br><span class="language-javascript">					box1.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = left + sl + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">					box1.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = top + st + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box2&quot;</span>);</span><br><span class="language-javascript">				box2.<span class="hljs-property">onmousemove</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					event.<span class="hljs-property">cancelBubble</span> = <span class="hljs-literal">true</span>;  <span class="hljs-comment">//冒泡是取消的</span></span><br><span class="language-javascript">				&#125;;	</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 1000px;width: 2000px;&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box2&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 500px; height: 500px; background-color: #bfa;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<h4 id="9-3-事件的委派"><a href="#9-3-事件的委派" class="headerlink" title="9.3 事件的委派"></a>9.3 事件的委派</h4><p>指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。</p>
<p>事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能</p>
<p>我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的<br>我们可以尝试将其绑定给元素的共同的祖先元素</p>
<p><strong>target</strong> : event中的target表示的触发事件的对象</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> u1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;u1&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn01 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn01&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">				btn01.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">//创建一个li</span></span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> li = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="language-javascript">					li.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">&quot;&lt;a href=&#x27;javascript:;&#x27; class=&#x27;link&#x27;&gt;新建的超链接&lt;/a&gt;&quot;</span>;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					<span class="hljs-comment">//将li添加到ul中</span></span><br><span class="language-javascript">					u1.<span class="hljs-title function_">appendChild</span>(li);</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> allA = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="language-javascript">				u1.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">if</span>(event.<span class="hljs-property">target</span>.<span class="hljs-property">className</span> == <span class="hljs-string">&quot;link&quot;</span>)&#123;</span><br><span class="language-javascript">						<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是ul的单击响应函数&quot;</span>);</span><br><span class="language-javascript">					&#125;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn01&quot;</span>&gt;</span>添加超链接<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;u1&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: #bfa;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是p元素<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;link&quot;</span>&gt;</span>超链接一<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;link&quot;</span>&gt;</span>超链接二<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;link&quot;</span>&gt;</span>超链接三<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="9-4-事件的绑定"><a href="#9-4-事件的绑定" class="headerlink" title="9.4 事件的绑定"></a>9.4 事件的绑定</h4><p>addEventListener()<br>通过这个方法也可以为元素绑定响应函数<br>参数：<br>1.事件的字符串，不要on<br>2.回调函数，当事件触发时该函数会被调用<br>3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false</p>
<p>使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，<br>这样当事件被触发时，响应函数将会按照函数的绑定顺序执行</p>
<p>这个方法不支持IE8及以下的浏览器</p>
<p>attachEvent()</p>
<p>在IE8中可以使用attachEvent()来绑定事件<br>参数：<br>1.事件的字符串，要on<br>2.回调函数</p>
<p>这个方法也可以同时为一个事件绑定多个处理函数，<br>不同的是它是后绑定先执行，执行顺序和addEventListener()相反</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">bind</span>(<span class="hljs-params">obj , eventStr , callback</span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(obj.<span class="hljs-property">addEventListener</span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">//大部分浏览器兼容的方式</span></span><br><span class="language-javascript">					obj.<span class="hljs-title function_">addEventListener</span>(eventStr , callback , <span class="hljs-literal">false</span>);</span><br><span class="language-javascript">				&#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * this是谁由调用方式决定</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * callback.call(obj)</span></span><br><span class="hljs-comment"><span class="language-javascript">					 */</span></span><br><span class="language-javascript">					<span class="hljs-comment">//IE8及以下</span></span><br><span class="language-javascript">					obj.<span class="hljs-title function_">attachEvent</span>(<span class="hljs-string">&quot;on&quot;</span>+eventStr , <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">						<span class="hljs-comment">//在匿名函数中调用回调函数</span></span><br><span class="language-javascript">						callback.<span class="hljs-title function_">call</span>(obj);</span><br><span class="language-javascript">					&#125;);</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">            &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn01 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn01&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-title function_">bind</span>(btn01 , <span class="hljs-string">&quot;click&quot;</span> , <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>);</span><br><span class="language-javascript">				&#125;);</span><br><span class="language-javascript">			</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn01&quot;</span>&gt;</span>点我一下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="9-5-事件的传播"><a href="#9-5-事件的传播" class="headerlink" title="9.5 事件的传播"></a>9.5 事件的传播</h4><p>关于事件的传播网景公司和微软公司有不同的理解<br>微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，<br>然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。<br>网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，<br>然后在向内传播给后代元素<br>W3C综合了两个公司的方案，将事件传播分成了三个阶段<br>1.捕获阶段<br>在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件<br>2.目标阶段<br>事件捕获到目标元素，捕获结束开始在目标元素上触发事件<br>3.冒泡阶段<br>事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件</p>
<p>如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true<br>一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false</p>
<p>IE8及以下的浏览器中没有捕获阶段</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">			<span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellowgreen;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box2</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box3</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">150px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: skyblue;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">        	  <span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box2&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box3 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box3&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-title function_">bind</span>(box1,<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是box1的响应函数&quot;</span>)</span><br><span class="language-javascript">				&#125;);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-title function_">bind</span>(box2,<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是box2的响应函数&quot;</span>)</span><br><span class="language-javascript">				&#125;);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-title function_">bind</span>(box3,<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我是box3的响应函数&quot;</span>)</span><br><span class="language-javascript">				&#125;);</span><br><span class="language-javascript">                </span><br><span class="language-javascript">		    	<span class="hljs-keyword">function</span> <span class="hljs-title function_">bind</span>(<span class="hljs-params">obj , eventStr , callback</span>)&#123;</span><br><span class="language-javascript">                    <span class="hljs-keyword">if</span>(obj.<span class="hljs-property">addEventListener</span>)&#123;</span><br><span class="language-javascript">                        <span class="hljs-comment">//大部分浏览器兼容的方式</span></span><br><span class="language-javascript">                        obj.<span class="hljs-title function_">addEventListener</span>(eventStr , callback , <span class="hljs-literal">true</span>);</span><br><span class="language-javascript">                    &#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">                        obj.<span class="hljs-title function_">attachEvent</span>(<span class="hljs-string">&quot;on&quot;</span>+eventStr , <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                            <span class="hljs-comment">//在匿名函数中调用回调函数</span></span><br><span class="language-javascript">                            callback.<span class="hljs-title function_">call</span>(obj);</span><br><span class="language-javascript">                        &#125;);</span><br><span class="language-javascript">                    &#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box2&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box3&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="9-6-常用事件"><a href="#9-6-常用事件" class="headerlink" title="9.6 常用事件"></a>9.6 常用事件</h4><h5 id="9-6-1-鼠标事件"><a href="#9-6-1-鼠标事件" class="headerlink" title="9.6.1 鼠标事件"></a>9.6.1 鼠标事件</h5><p>拖拽事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        	<span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">				<span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box2</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">				<span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">				</span><br><span class="language-css">				<span class="hljs-attribute">left</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">top</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 拖拽box1元素</span></span><br><span class="hljs-comment"><span class="language-javascript">				 *  - 拖拽的流程</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup</span></span><br><span class="hljs-comment"><span class="language-javascript">				 */</span></span><br><span class="language-javascript">				<span class="hljs-comment">//获取box1</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box2&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> img1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;img1&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">				<span class="hljs-title function_">drag</span>(box1);</span><br><span class="language-javascript">				<span class="hljs-title function_">drag</span>(box2);</span><br><span class="language-javascript">				<span class="hljs-title function_">drag</span>(img1);</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 提取一个专门用来设置拖拽的函数</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 参数：开启拖拽的元素</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">drag</span>(<span class="hljs-params">obj</span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-comment">//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown</span></span><br><span class="language-javascript">				obj.<span class="hljs-property">onmousedown</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					obj.<span class="hljs-property">setCapture</span> &amp;&amp; obj.<span class="hljs-title function_">setCapture</span>();</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> ol = event.<span class="hljs-property">clientX</span> - obj.<span class="hljs-property">offsetLeft</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> ot = event.<span class="hljs-property">clientY</span> - obj.<span class="hljs-property">offsetTop</span>;</span><br><span class="language-javascript">					<span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">						event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">						<span class="hljs-keyword">var</span> left = event.<span class="hljs-property">clientX</span> - ol;</span><br><span class="language-javascript">						<span class="hljs-keyword">var</span> top = event.<span class="hljs-property">clientY</span> - ot;</span><br><span class="language-javascript">						</span><br><span class="language-javascript">						<span class="hljs-comment">//修改box1的位置</span></span><br><span class="language-javascript">						obj.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = left+<span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">						obj.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = top+<span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">						</span><br><span class="language-javascript">					&#125;;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					<span class="hljs-comment">//为document绑定一个鼠标松开事件</span></span><br><span class="language-javascript">					<span class="hljs-variable language_">document</span>.<span class="hljs-property">onmouseup</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">						<span class="hljs-comment">//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup</span></span><br><span class="language-javascript">						<span class="hljs-comment">//取消document的onmousemove事件</span></span><br><span class="language-javascript">						<span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = <span class="hljs-literal">null</span>;</span><br><span class="language-javascript">						<span class="hljs-comment">//取消document的onmouseup事件</span></span><br><span class="language-javascript">						<span class="hljs-variable language_">document</span>.<span class="hljs-property">onmouseup</span> = <span class="hljs-literal">null</span>;</span><br><span class="language-javascript">						<span class="hljs-comment">//当鼠标松开时，取消对事件的捕获</span></span><br><span class="language-javascript">						obj.<span class="hljs-property">releaseCapture</span> &amp;&amp; obj.<span class="hljs-title function_">releaseCapture</span>();</span><br><span class="language-javascript">					&#125;;					</span><br><span class="language-javascript">					<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<br>    我是一段文字<br>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/an.jpg&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;img1&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;position: absolute;&quot;</span>/&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>滚轮事件：</p>
<p>onwheel都支持</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">       <span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				box1.<span class="hljs-property">onmousewheel</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">					<span class="hljs-keyword">if</span>(event.<span class="hljs-property">wheelDelta</span> &gt; <span class="hljs-number">0</span> || event.<span class="hljs-property">detail</span> &lt; <span class="hljs-number">0</span>)&#123; <span class="hljs-comment">//event.detail ie8的属性值</span></span><br><span class="language-javascript">						<span class="hljs-comment">//向上滚，box1变短</span></span><br><span class="language-javascript">						box1.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = box1.<span class="hljs-property">clientHeight</span> - <span class="hljs-number">10</span> + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">						</span><br><span class="language-javascript">					&#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">						<span class="hljs-comment">//向下滚，box1变长</span></span><br><span class="language-javascript">						box1.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = box1.<span class="hljs-property">clientHeight</span> + <span class="hljs-number">10</span> + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">					&#125;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * 需要使用event来取消默认行为event.preventDefault();</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错</span></span><br><span class="hljs-comment"><span class="language-javascript">					 */</span></span><br><span class="language-javascript">					event.<span class="hljs-property">preventDefault</span> &amp;&amp; event.<span class="hljs-title function_">preventDefault</span>();</span><br><span class="language-javascript">					<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;	</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//为火狐绑定滚轮事件</span></span><br><span class="language-javascript">				<span class="hljs-title function_">bind</span>(box1,<span class="hljs-string">&quot;DOMMouseScroll&quot;</span>,box1.<span class="hljs-property">onmousewheel</span>);	</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">bind</span>(<span class="hljs-params">obj , eventStr , callback</span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(obj.<span class="hljs-property">addEventListener</span>)&#123;</span><br><span class="language-javascript">					obj.<span class="hljs-title function_">addEventListener</span>(eventStr , callback , <span class="hljs-literal">false</span>);</span><br><span class="language-javascript">				&#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">					obj.<span class="hljs-title function_">attachEvent</span>(<span class="hljs-string">&quot;on&quot;</span>+eventStr , <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">						callback.<span class="hljs-title function_">call</span>(obj);</span><br><span class="language-javascript">					&#125;);</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 2000px;&quot;</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>practice</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                <span class="hljs-variable language_">document</span>.<span class="hljs-property">onkeydown</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span><br><span class="language-javascript">                 &#123;</span><br><span class="language-javascript">                    event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                     <span class="hljs-keyword">var</span> speed = <span class="hljs-number">10</span> ;</span><br><span class="language-javascript">                     <span class="hljs-keyword">if</span>(event.<span class="hljs-property">ctrlKey</span>)  </span><br><span class="language-javascript">                     &#123;</span><br><span class="language-javascript">                        speed = <span class="hljs-number">20</span>;</span><br><span class="language-javascript">                     &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">keyCode</span>);</span><br><span class="language-javascript">                     <span class="hljs-keyword">switch</span>(event.<span class="hljs-property">keyCode</span>)&#123;</span><br><span class="language-javascript">						<span class="hljs-keyword">case</span> <span class="hljs-number">37</span>:</span><br><span class="language-javascript">							box.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = box.<span class="hljs-property">offsetLeft</span> - speed + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">							<span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">						<span class="hljs-keyword">case</span> <span class="hljs-number">39</span>:</span><br><span class="language-javascript">							box.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = box.<span class="hljs-property">offsetLeft</span> + speed + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">							<span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">						<span class="hljs-keyword">case</span> <span class="hljs-number">38</span>:</span><br><span class="language-javascript">							box.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = box.<span class="hljs-property">offsetTop</span> - speed + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">							<span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">						<span class="hljs-keyword">case</span> <span class="hljs-number">40</span>:</span><br><span class="language-javascript">							box.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = box.<span class="hljs-property">offsetTop</span> + speed + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">							<span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">					&#125;     </span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h5 id="9-6-2-键盘事件"><a href="#9-6-2-键盘事件" class="headerlink" title="9.6.2 键盘事件"></a>9.6.2 键盘事件</h5><p>键盘事件：<br>onkeydown<br>按键被按下<br>对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发<br>当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。<br>onkeyup<br>按键被松开</p>
<p>键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document</p>
<p>keyCode</p>
<p>可以通过keyCode来获取按键的编码<br>通过它可以判断哪个按键被按下<br>除了keyCode，事件对象中还提供了几个属性<br>altKey<br>ctrlKey<br>shiftKey<br>这个三个用来判断alt ctrl 和 shift是否被按下<br>如果按下则返回true，否则返回false</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-variable language_">document</span>.<span class="hljs-property">onkeydown</span> =<span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)&#123;</span><br><span class="language-javascript">                event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript">                <span class="hljs-keyword">if</span>(event.<span class="hljs-property">keyCode</span> == <span class="hljs-number">89</span> &amp;&amp; event.<span class="hljs-property">ctrlKey</span>)</span><br><span class="language-javascript">                &#123;</span><br><span class="language-javascript">                    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;ctrl + y 同时被按下&quot;</span>);</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> input = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;input&quot;</span>)[<span class="hljs-number">0</span>];</span><br><span class="language-javascript">            input.<span class="hljs-property">onkeydown</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span><br><span class="language-javascript">            &#123;</span><br><span class="language-javascript">                event = event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">if</span>(event.<span class="hljs-property">keyCode</span> &gt;=<span class="hljs-number">48</span> &amp;&amp; event.<span class="hljs-property">keyCode</span>&lt;= <span class="hljs-number">57</span>)</span><br><span class="language-javascript">                &#123;</span><br><span class="language-javascript">                    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;  <span class="hljs-comment">//不能舒服数字</span></span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">            </span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="10-BOM"><a href="#10-BOM" class="headerlink" title="10 BOM"></a>10 BOM</h3><p>浏览器对象模型(browser object model)<br>BOM可以使我们通过JS来操作浏览器<br>在BOM中为我们提供了一组对象，用来完成对浏览器的操作<br>BOM对象<br>Window： 代表的是整个浏览器的窗口，同时window也是网页中的全局对象<br>Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器<br>Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面<br>History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录<br>由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页<br>而且该操作只在当次访问时有效<br>Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息</p>
<p>这些BOM对象在浏览器中都是作为window对象的属性保存的，<br>可以通过window对象来使用，也可以直接使用</p>
<h4 id="10-1Navigator"><a href="#10-1Navigator" class="headerlink" title="10.1Navigator"></a>10.1Navigator</h4><p>代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器<br>由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了<br>一般我们只会使用userAgent来判断浏览器的信息，<br>userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，<br>不同的浏览器会有不同的userAgent</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html">火狐的userAgent<br>Mozilla5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko20100101 Firefox50.0<br><br>Chrome的userAgent<br>Mozilla5.0 (Windows NT 6.1; Win64; x64) AppleWebKit537.36 (KHTML, like Gecko) Chrome52.0.2743.82 Safari537.36<br><br>IE8<br>Mozilla4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)<br><br>IE9<br>Mozilla5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)<br><br>IE10<br>Mozilla5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)<br><br>IE11<br>Mozilla5.0 (Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko<br>在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了<br></code></pre></td></tr></table></figure>



<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html">alert(navigator.appName);  <br>  <br>var ua = navigator.userAgent;  <br>  <br>console.log(ua);  <br>  <br>if(firefoxi.test(ua))&#123;  <br>alert(&quot;你是火狐！！！&quot;);  <br>&#125;else if(chromei.test(ua))&#123;  <br>alert(&quot;你是Chrome&quot;);  <br>&#125;else if(msiei.test(ua))&#123;  <br>alert(&quot;你是IE浏览器~~~&quot;);  <br>&#125;else if(&quot;ActiveXObject&quot; in window)&#123;  <br>alert(&quot;你是IE11，枪毙了你~~~&quot;);  <br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="10-2-History"><a href="#10-2-History" class="headerlink" title="10.2 History"></a>10.2 History</h4><p>对象可以用来操作浏览器向前或向后翻页<br>length : 属性，可以获取到当成访问的链接数量<br>back() : 可以用来回退到上一个页面，作用和浏览器的回退按钮一样<br>forward() : 可以跳转下一个页面，作用和浏览器的前进按钮一样<br>go() :可以用来跳转到指定的页面<br>它需要一个整数作为参数<br>1: 表示向前跳转一个页面 相当于forward()<br>2: 表示向前跳转两个页面<br>-1: 表示向后跳转一个页面<br>-2: 表示向后跳转两个页面</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * History</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	- 对象可以用来操作浏览器向前或向后翻页</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//获取按钮对象</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(history.<span class="hljs-property">length</span>);<span class="hljs-comment">//可以获取到当成访问的链接数量</span></span><br><span class="language-javascript">					history.<span class="hljs-title function_">back</span>(); <span class="hljs-comment">//可以用来回退到上一个页面，作用和浏览器的回退按钮一样</span></span><br><span class="language-javascript">					history.<span class="hljs-title function_">forward</span>(); <span class="hljs-comment">//可以跳转下一个页面，作用和浏览器的前进按钮一样</span></span><br><span class="language-javascript">					history.<span class="hljs-title function_">go</span>(-<span class="hljs-number">2</span>);<span class="hljs-comment">//表示向后跳转两个页面</span></span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>点我一下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>History<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;01.BOM.html&quot;</span>&gt;</span>去BOM<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="10-3-Location"><a href="#10-3-Location" class="headerlink" title="10.3 Location"></a>10.3 Location</h4><p>该对象中封装了浏览器的地址栏的信息<br>如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）<br>alert(location);<br>如果直接将location属性修改为一个完整的路径，或相对路径<br>则我们页面会自动跳转到该路径，并且会生成相应的历史记录</p>
<p>location &#x3D; “http:<a target="_blank" rel="noopener" href="http://www.baidu.com"/">www.baidu.com"</a>;<br>location &#x3D; “01.BOM.html”;<br>assign()<br>用来跳转到其他的页面，作用和直接修改location一样</p>
<p>reload()<br>用于重新加载当前页面，作用和刷新按钮一样<br>如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面</p>
<p>location.reload(true);<br>replace()<br>可以使用一个新的页面替换当前页面，调用完毕也会跳转页面<br>不会生成历史记录，不能使用回退按钮回退</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * Location</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	- 该对象中封装了浏览器的地址栏的信息</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//获取按钮对象</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);				</span><br><span class="language-javascript">				btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(location);<span class="hljs-comment">//获取到地址栏的信息（当前页面的完整路径）</span></span><br><span class="language-javascript">					location = <span class="hljs-string">&quot;http://www.baidu.com&quot;</span>;<span class="hljs-comment">//我们页面会自动跳转到该路径，并且会生成相应的历史记录</span></span><br><span class="language-javascript">					location = <span class="hljs-string">&quot;01.BOM.html&quot;</span>;</span><br><span class="language-javascript">					location.<span class="hljs-title function_">assign</span>(<span class="hljs-string">&quot;http://www.baidu.com&quot;</span>);<span class="hljs-comment">//用来跳转到其他的页面，作用和直接修改location一样</span></span><br><span class="language-javascript">					location.<span class="hljs-title function_">reload</span>(<span class="hljs-literal">true</span>);<span class="hljs-comment">//用于重新加载当前页面，作用和刷新按钮一样</span></span><br><span class="language-javascript">					location.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;01.BOM.html&quot;</span>);<span class="hljs-comment">//可以使用一个新的页面替换当前页面，调用完毕也会跳转页面 不会生成历史记录，不能使用回退按钮回退</span></span><br><span class="language-javascript">					</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>点我一下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Location<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;01.BOM.html&quot;</span>&gt;</span>去BOM<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="10-4-window"><a href="#10-4-window" class="headerlink" title="10.4 window"></a>10.4 window</h4><h5 id="10-4-1定时器"><a href="#10-4-1定时器" class="headerlink" title="10.4.1定时器"></a>10.4.1定时器</h5><p><strong>setInterval()</strong><br>定时调用 : 可以将一个函数，每隔一段时间执行一次<br>参数：1.回调函数，该函数会每隔一段时间被调用一次   2.每次调用间隔的时间，单位是毫秒</p>
<p>返回值： 返回一个Number类型的数据<br>这个数字用来作为定时器的唯一标识<br><strong>clearInterval()可以用来关闭一个定时器</strong><br>方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器</p>
<p>clearInterval()可以接收任意参数，<br>如果参数是一个有效的定时器的标识，则停止对应的定时器<br>如果参数不是一个有效的标识，则什么也不做</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> h1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;index&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> num = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                h1.<span class="hljs-property">innerText</span> = num++;</span><br><span class="language-javascript">                <span class="hljs-keyword">if</span>(num == <span class="hljs-number">1000</span>)</span><br><span class="language-javascript">                &#123;</span><br><span class="language-javascript">                    <span class="hljs-built_in">clearInterval</span>(timer);</span><br><span class="language-javascript">                &#125; </span><br><span class="language-javascript">            &#125;, <span class="hljs-number">100</span>);</span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="10-4-2-延时调用"><a href="#10-4-2-延时调用" class="headerlink" title="10.4.2 延时调用"></a>10.4.2 延时调用</h5><p><strong>setTimeout</strong></p>
<p>延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次<br>延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次<br>延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择</p>
<p>clearTimeout(timer);()来关闭一个延时调用clearTimeout(timer);</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> slowtime  = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;slowtime&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> timer = <span class="hljs-built_in">setTimeout</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                slowtime.<span class="hljs-property">innerText</span> = <span class="hljs-string">&quot;我是隔三秒钟之后促发的&quot;</span></span><br><span class="language-javascript">            &#125;,<span class="hljs-number">3000</span>);</span><br><span class="language-javascript">            <span class="hljs-comment">// clearTimeout(timer); //加上这就话上述的语句不会调用</span></span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;slowtime&quot;</span>&gt;</span> 初始化的值 <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br><br></code></pre></td></tr></table></figure>

<p><strong>类的操作</strong></p>
<p><strong>直接修改元素的类css：</strong></p>
<p>通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便 我希望一行代码，可以同时修改多个样式</p>
<p>我们可以通过修改元素的class属性来间接的修改样式.这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，<br>并且这种方式，可以使表现和行为进一步的分离</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html">box.className += &quot; b2&quot;;	//注意有空格，添加class属性<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="language-css"></span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-class">.b1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-class">.b2</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn01 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn01&quot;</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//为btn01绑定单击响应函数</span></span><br><span class="language-javascript">				btn01.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;		</span><br><span class="language-javascript">					<span class="hljs-title function_">toggleClass</span>(box,<span class="hljs-string">&quot;b2&quot;</span>);</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">//定义一个函数，用来向一个元素中添加指定的class属性值</span></span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 参数:</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	obj 要添加class属性的元素</span></span><br><span class="hljs-comment"><span class="language-javascript">			 *  cn 要添加的class值</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">addClass</span>(<span class="hljs-params">obj , cn</span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//检查obj中是否含有cn</span></span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(!<span class="hljs-title function_">hasClass</span>(obj , cn))&#123;</span><br><span class="language-javascript">					obj.<span class="hljs-property">className</span> += <span class="hljs-string">&quot; &quot;</span>+cn;</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 判断一个元素中是否含有指定的class属性值</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	如果有该class，则返回true，没有则返回false</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">hasClass</span>(<span class="hljs-params">obj , cn</span>)&#123;			</span><br><span class="language-javascript">				<span class="hljs-comment">//判断obj中有没有cn class</span></span><br><span class="language-javascript">				<span class="hljs-comment">//创建一个正则表达式</span></span><br><span class="language-javascript">				<span class="hljs-comment">//var reg = /\bb2\b/;</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;\\b&quot;</span>+cn+<span class="hljs-string">&quot;\\b&quot;</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-keyword">return</span> reg.<span class="hljs-title function_">test</span>(obj.<span class="hljs-property">className</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 删除一个元素中的指定的class属性</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">removeClass</span>(<span class="hljs-params">obj , cn</span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-comment">//创建一个正则表达式</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;\\b&quot;</span>+cn+<span class="hljs-string">&quot;\\b&quot;</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//删除class</span></span><br><span class="language-javascript">				obj.<span class="hljs-property">className</span> = obj.<span class="hljs-property">className</span>.<span class="hljs-title function_">replace</span>(reg , <span class="hljs-string">&quot;&quot;</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * toggleClass可以用来切换一个类</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	如果元素中具有该类，则删除</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 	如果元素中没有该类，则添加</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">toggleClass</span>(<span class="hljs-params">obj , cn</span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-comment">//判断obj中是否含有cn</span></span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(<span class="hljs-title function_">hasClass</span>(obj , cn))&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">//有，则删除</span></span><br><span class="language-javascript">					<span class="hljs-title function_">removeClass</span>(obj , cn);</span><br><span class="language-javascript">				&#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">//没有，则添加</span></span><br><span class="language-javascript">					<span class="hljs-title function_">addClass</span>(obj , cn);</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn01&quot;</span>&gt;</span>点击按钮以后修改box的样式<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;b1 b2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<h3 id="11-JSON"><a href="#11-JSON" class="headerlink" title="11. JSON"></a>11. JSON</h3><p><strong>JavaScript Object Notation</strong> JS对象表示法</p>
<h4 id="11-1-JSON-格式"><a href="#11-1-JSON-格式" class="headerlink" title="11.1 JSON 格式"></a>11.1 JSON 格式</h4><ol>
<li>复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。</li>
<li>原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和<code>null</code>（不能使用<code>NaN</code>, <code>Infinity</code>, <code>-Infinity</code>和<code>undefined</code>）。</li>
<li>字符串<strong>必须使用双引号表示</strong>，不能使用单引号。</li>
<li>对象的键名必须放在双引号里面。</li>
<li>数组或对象最后一个成员的后面，不能加逗号。</li>
</ol>
<p>JS中的对象只有JS自己认识，其他的语言都不认识<br><strong>JSON就是一个特殊格式的字符串</strong>，这个字符串可以被任意的语言所识别，<br>并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互<br>JSON和JS对象的格式一样，只不过<strong>JSON字符串中的属性名必须加双引号</strong><br>其他的和JS语法一致<br>JSON分类：<br>1.对象 {}<br>2.数组 []</p>
<p>JSON中允许的值：<br>1.字符串<br>2.数值<br>3.布尔值<br>4.null<br>5.对象<br>6.数组</p>
<p>举例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> obj = &#123;</span><br><span class="language-javascript">                name : <span class="hljs-string">&quot;aodi&quot;</span>,</span><br><span class="language-javascript">                age : <span class="hljs-number">18</span>,</span><br><span class="language-javascript">                <span class="hljs-attr">gander</span>: <span class="hljs-string">&quot;man&quot;</span>,</span><br><span class="language-javascript">                boj1 :&#123;<span class="hljs-attr">aihao</span>: <span class="hljs-string">&quot;打篮球&quot;</span>,water : <span class="hljs-string">&quot;coco&quot;</span>&#125;,</span><br><span class="language-javascript">                arr : [<span class="hljs-number">1021</span>,<span class="hljs-number">231</span>,<span class="hljs-number">231</span>,<span class="hljs-number">312</span>,,<span class="hljs-number">321</span>,<span class="hljs-number">231</span>]</span><br><span class="language-javascript">            &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//转化为json的字符串</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> str = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(obj);</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str); <span class="hljs-comment">//&#123;&quot;name&quot;:&quot;aodi&quot;,&quot;age&quot;:18,&quot;gander&quot;:&quot;man&quot;,&quot;boj1&quot;:&#123;&quot;aihao&quot;:&quot;打篮球&quot;,&quot;water&quot;:&quot;coco&quot;&#125;&#125;</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>( <span class="hljs-keyword">typeof</span> str); <span class="hljs-comment">//string</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">// 将json的字符串转化为对象</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> obj1  = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(str);</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj1); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">name</span>); <span class="hljs-comment">//aodi </span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">boj1</span>.<span class="hljs-property">aihao</span>); <span class="hljs-comment">//打篮球</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">arr</span>.<span class="hljs-property">length</span>); <span class="hljs-comment">//7</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">arr</span>[<span class="hljs-number">2</span>]); <span class="hljs-comment">//231</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>JSON工具类</p>
<p>json &gt; js对象<br>JSON.parse()<br>可以将以JSON字符串转换为js对象<br>它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回</p>
<p>var o &#x3D; JSON.parse(json);<br>var o2 &#x3D; JSON.parse(arr);</p>
<p>var obj3 &#x3D; {name:”猪八戒” , age:28 , gender:”男”};</p>
<p>JS对象 &gt; JSON<br>JSON.stringify() -ify&#x2F;fy，表示”使……化。<br>可以将一个JS对象转换为JSON字符串<br>需要一个js对象作为参数，会返回一个JSON字符串</p>
<p>var str &#x3D; JSON.stringify(obj3);<br>console.log(str);</p>
<p>JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错</p>
<h3 id="12-other"><a href="#12-other" class="headerlink" title="12 other"></a>12 other</h3><h4 id="12-1-localStorage"><a href="#12-1-localStorage" class="headerlink" title="12.1 localStorage"></a>12.1 localStorage</h4><p>只读的<code>localStorage</code> 属性允许你访问一个<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document"><code>Document</code></a> 源（origin）的对象 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Storage"><code>Storage</code></a>；其存储的数据能在跨浏览器会话保留。<code>localStorage</code> 类似 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage"><code>sessionStorage</code></a>，但其区别在于：存储在 <code>localStorage</code> 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 <code>sessionStorage</code> 的数据会被清除 。</p>
<h4 id="12-2-eval"><a href="#12-2-eval" class="headerlink" title="12 .2 eval()"></a>12 .2 eval()</h4><p>eval()<br>这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回<br>如果使用eval()执行的字符串中含有{},它会将{}当成是代码块<br>如果不希望将其当成代码块解析，则需要在字符串前后各加一个()</p>
<p>eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，<br>但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> str = <span class="hljs-string">&#x27;&#123;&quot;name&quot;:&quot;孙悟空&quot;,&quot;age&quot;:18,&quot;gender&quot;:&quot;男&quot;&#125;&#x27;</span>;  </span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> obj = <span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;(&quot;</span>+str+<span class="hljs-string">&quot;)&quot;</span>);    </span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<span class="hljs-comment">//name&quot;:&quot;孙悟空&quot;,&quot;age&quot;:18,&quot;gender&quot;:&quot;男</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj); <span class="hljs-comment">//object</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <br></code></pre></td></tr></table></figure>

<p>Unicode 编码问题</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;\u1231&quot;</span>);<span class="hljs-comment">//ሱ</span></span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- ҵ --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;font-size: 50px;&quot;</span>&gt;</span>&amp;#1205<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- ᕎ --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;font-size: 50px;&quot;</span>&gt;</span>&amp;#5454<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>confirm()用于弹出一个带有确认和取消按钮的提示框<br>需要一个字符串作为参数，该字符串将会作为提示文字显示出来<br>如果用户点击确认则会返回true，如果点击取消则返回false<br>var flag &#x3D; confirm(“确认删除”+name+”吗?”);</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">if</span>(<span class="hljs-title function_">confirm</span>(<span class="hljs-string">&quot;确认继续执行嘛？&quot;</span>))</span><br><span class="language-javascript">            &#123;</span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我执行了&quot;</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">            <span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我退出了&quot;</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="12-3-原生js"><a href="#12-3-原生js" class="headerlink" title="12.3 原生js"></a>12.3 原生js</h3><p><strong>原生js实现复制内容到剪切板</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html">copy() &#123;  <br>    const input = document.createElement(&quot;input&quot;);  <br>    document.body.appendChild(input);  <br>    input.setAttribute(&quot;value&quot;,this.solution.code);  <br>    input.select();  <br>    if (document.execCommand(&quot;copy&quot;)) &#123;  <br>        document.execCommand(&quot;copy&quot;);  <br>        // console.log(&quot;复制成功&quot;);  <br>    &#125;  <br>    document.body.removeChild(input);  <br>&#125;<br></code></pre></td></tr></table></figure>





<p><strong>轮播图practice</strong></p>
<p><strong>js代码 tools</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//尝试创建一个可以执行简单动画的函数</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * 参数：</span><br><span class="hljs-comment"> * 	obj:要执行动画的对象</span><br><span class="hljs-comment"> * 	attr:要执行动画的样式，比如：left top width height</span><br><span class="hljs-comment"> * 	target:执行动画的目标位置</span><br><span class="hljs-comment"> * 	speed:移动的速度(正数向右移动，负数向左移动)</span><br><span class="hljs-comment"> *  callback:回调函数，这个函数将会在动画执行完毕以后执行</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">move</span>(<span class="hljs-params">obj, attr, target, speed, callback</span>) &#123;<br>	<span class="hljs-built_in">clearInterval</span>(obj.<span class="hljs-property">timer</span>);<br>	<span class="hljs-keyword">var</span> current = <span class="hljs-built_in">parseInt</span>(<span class="hljs-title function_">getStyle</span>(obj, attr));<br><br>	<span class="hljs-comment">//判断速度的正负值</span><br>	<span class="hljs-comment">//如果从0 向 800移动，则speed为正</span><br>	<span class="hljs-comment">//如果从800向0移动，则speed为负</span><br>	<span class="hljs-keyword">if</span>(current &gt; target) &#123;<br>		<span class="hljs-comment">//此时速度应为负值</span><br>		speed = -speed;<br>	&#125;<br><br>	<span class="hljs-comment">//开启一个定时器，用来执行动画效果</span><br>	<span class="hljs-comment">//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识</span><br>	obj.<span class="hljs-property">timer</span> = <span class="hljs-built_in">setInterval</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) &#123;<br><br>		<span class="hljs-comment">//获取box1的原来的left值</span><br>		<span class="hljs-keyword">var</span> oldValue = <span class="hljs-built_in">parseInt</span>(<span class="hljs-title function_">getStyle</span>(obj, attr));<br><br>		<span class="hljs-comment">//在旧值的基础上增加</span><br>		<span class="hljs-keyword">var</span> newValue = oldValue + speed;<br><br>		<span class="hljs-comment">//判断newValue是否大于800</span><br>		<span class="hljs-comment">//从800 向 0移动</span><br>		<span class="hljs-comment">//向左移动时，需要判断newValue是否小于target</span><br>		<span class="hljs-comment">//向右移动时，需要判断newValue是否大于target</span><br>		<span class="hljs-keyword">if</span>((speed &lt; <span class="hljs-number">0</span> &amp;&amp; newValue &lt; target) || (speed &gt; <span class="hljs-number">0</span> &amp;&amp; newValue &gt; target)) &#123;<br>			newValue = target;<br>		&#125;<br><br>		<span class="hljs-comment">//将新值设置给box1</span><br>		obj.<span class="hljs-property">style</span>[attr] = newValue + <span class="hljs-string">&quot;px&quot;</span>;<br><br>		<span class="hljs-comment">//当元素移动到0px时，使其停止执行动画</span><br>		<span class="hljs-keyword">if</span>(newValue == target) &#123;<br>			<span class="hljs-comment">//达到目标，关闭定时器</span><br>			<span class="hljs-built_in">clearInterval</span>(obj.<span class="hljs-property">timer</span>);<br>			<span class="hljs-comment">//动画执行完毕，调用回调函数</span><br>			callback &amp;&amp; <span class="hljs-title function_">callback</span>();<br>		&#125;<br>	&#125;, <span class="hljs-number">30</span>);<br>&#125;<br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * 定义一个函数，用来获取指定元素的当前的样式</span><br><span class="hljs-comment"> * 参数：</span><br><span class="hljs-comment"> * 		obj 要获取样式的元素</span><br><span class="hljs-comment"> * 		name 要获取的样式名</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getStyle</span>(<span class="hljs-params">obj, name</span>) &#123;<br><br>	<span class="hljs-keyword">if</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">getComputedStyle</span>) &#123;<br>		<span class="hljs-comment">//正常浏览器的方式，具有getComputedStyle()方法</span><br>		<span class="hljs-keyword">return</span> <span class="hljs-title function_">getComputedStyle</span>(obj, <span class="hljs-literal">null</span>)[name];<br>	&#125; <span class="hljs-keyword">else</span> &#123;<br>		<span class="hljs-keyword">return</span> obj.<span class="hljs-property">currentStyle</span>[name];<br>	&#125;<br>&#125;<br><br><span class="hljs-comment">//定义一个函数，用来向一个元素中添加指定的class属性值</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * 参数:</span><br><span class="hljs-comment"> * 	obj 要添加class属性的元素</span><br><span class="hljs-comment"> *  cn 要添加的class值</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">addClass</span>(<span class="hljs-params">obj, cn</span>) &#123;<br>	<span class="hljs-keyword">if</span>(!<span class="hljs-title function_">hasClass</span>(obj, cn)) &#123;<br>		obj.<span class="hljs-property">className</span> += <span class="hljs-string">&quot; &quot;</span> + cn;<br>	&#125;<br>&#125;<br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * 判断一个元素中是否含有指定的class属性值</span><br><span class="hljs-comment"> * 	如果有该class，则返回true，没有则返回false</span><br><span class="hljs-comment"> * 	</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">hasClass</span>(<span class="hljs-params">obj, cn</span>) &#123;<br>	<span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;\\b&quot;</span> + cn + <span class="hljs-string">&quot;\\b&quot;</span>);<br>	<span class="hljs-keyword">return</span> reg.<span class="hljs-title function_">test</span>(obj.<span class="hljs-property">className</span>);<br>&#125;<br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * 删除一个元素中的指定的class属性</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">removeClass</span>(<span class="hljs-params">obj, cn</span>) &#123;<br>	<span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;\\b&quot;</span> + cn + <span class="hljs-string">&quot;\\b&quot;</span>);<br>	obj.<span class="hljs-property">className</span> = obj.<span class="hljs-property">className</span>.<span class="hljs-title function_">replace</span>(reg, <span class="hljs-string">&quot;&quot;</span>);<br>&#125;<br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * toggleClass可以用来切换一个类</span><br><span class="hljs-comment"> * 	如果元素中具有该类，则删除</span><br><span class="hljs-comment"> * 	如果元素中没有该类，则添加</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">toggleClass</span>(<span class="hljs-params">obj, cn</span>) &#123;<br>	<span class="hljs-keyword">if</span>(<span class="hljs-title function_">hasClass</span>(obj, cn)) &#123;<br>		<span class="hljs-title function_">removeClass</span>(obj, cn);<br>	&#125; <span class="hljs-keyword">else</span> &#123;<br>		<span class="hljs-title function_">addClass</span>(obj, cn);<br>	&#125;<br><br>&#125;<br><br></code></pre></td></tr></table></figure>

<p><strong>css代码</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><code class="hljs css">*&#123;<br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;<br>&#125;<br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment"> * 设置outer的样式</span><br><span class="hljs-comment"> */</span><br><span class="hljs-selector-id">#outer</span>&#123;<br>    <span class="hljs-comment">/*设置宽和高*/</span><br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">520px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">333px</span>;<br>    <span class="hljs-comment">/*居中*/</span><br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">50px</span> auto;<br>    <span class="hljs-comment">/*设置背景颜色*/</span><br>    <span class="hljs-attribute">background-color</span>: greenyellow;<br>    <span class="hljs-comment">/*设置padding*/</span><br>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>;<br>    <span class="hljs-comment">/*开启相对定位*/</span><br>    <span class="hljs-attribute">position</span>: relative;<br>    <span class="hljs-comment">/*裁剪溢出的内容*/</span><br>    <span class="hljs-attribute">overflow</span>: hidden;<br>&#125;<br><br><span class="hljs-comment">/*设置imgList*/</span><br><span class="hljs-selector-id">#imgList</span>&#123;<br>    <span class="hljs-comment">/*去除项目符号*/</span><br>    <span class="hljs-attribute">list-style</span>: none;<br>    <span class="hljs-comment">/*设置ul的宽度*/</span><br>    <span class="hljs-comment">/*width: 2600px;*/</span><br>    <span class="hljs-comment">/*开启绝对定位*/</span><br>    <span class="hljs-attribute">position</span>: absolute;<br>    <span class="hljs-comment">/*设置偏移量*/</span><br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">     * 每向左移动520px，就会显示到下一张图片</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>&#125;<br><br><span class="hljs-comment">/*设置图片中的li*/</span><br><span class="hljs-selector-id">#imgList</span> <span class="hljs-selector-tag">li</span>&#123;<br>    <span class="hljs-comment">/*设置浮动*/</span><br>    <span class="hljs-attribute">float</span>: left;<br>    <span class="hljs-comment">/*设置左右外边距*/</span><br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>;<br>&#125;<br><br><span class="hljs-comment">/*设置导航按钮*/</span><br><span class="hljs-selector-id">#navDiv</span>&#123;<br>    <span class="hljs-comment">/*开启绝对定位*/</span><br>    <span class="hljs-attribute">position</span>: absolute;<br>    <span class="hljs-comment">/*设置位置*/</span><br>    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">15px</span>;<br>    <span class="hljs-comment">/*设置left值</span><br><span class="hljs-comment">         outer宽度  520</span><br><span class="hljs-comment">         navDiv宽度 25*5 = 125</span><br><span class="hljs-comment">             520 - 125 = 395/2 = 197.5</span><br><span class="hljs-comment">     * */</span><br>    <span class="hljs-comment">/*left: 197px;*/</span><br>&#125;<br><br><span class="hljs-selector-id">#navDiv</span> <span class="hljs-selector-tag">a</span>&#123;<br>    <span class="hljs-comment">/*设置超链接浮动*/</span><br>    <span class="hljs-attribute">float</span>: left;<br>    <span class="hljs-comment">/*设置超链接的宽和高*/</span><br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">15px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">15px</span>;<br>    <span class="hljs-comment">/*设置背景颜色*/</span><br>    <span class="hljs-attribute">background-color</span>: red;<br>    <span class="hljs-comment">/*设置左右外边距*/</span><br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">5px</span>;<br>    <span class="hljs-comment">/*设置透明*/</span><br>    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.5</span>;<br>    <span class="hljs-comment">/*兼容IE8透明*/</span><br>    <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">alpha</span>(opacity=<span class="hljs-number">50</span>);<br>&#125;<br><br><span class="hljs-comment">/*设置鼠标移入的效果*/</span><br><span class="hljs-selector-id">#navDiv</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span>&#123;<br>    <span class="hljs-attribute">background-color</span>: black;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>index.html</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>轮播图<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- 引入css样式 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/lunbotu.css&quot;</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- 引入写好的工具 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/tools.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">    </span><br><span class="language-javascript">        <span class="hljs-comment">//    1.动态的处理ul的宽度,确保能装下水平的图片</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> imgList = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;imgList&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> imgArr = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;img&quot;</span>);</span><br><span class="language-javascript">            imgList.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-number">520</span> * imgArr.<span class="hljs-property">length</span> + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">// 2.设置导航栏居中（对父级元素向左偏移居中）</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> navDiv = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;navDiv&quot;</span>);</span><br><span class="language-javascript">			<span class="hljs-keyword">var</span> outer = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;outer&quot;</span>);</span><br><span class="language-javascript">            navDiv.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = (outer.<span class="hljs-property">offsetWidth</span> - navDiv.<span class="hljs-property">offsetWidth</span>) / <span class="hljs-number">2</span>  + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">// 3.对所有的超链接操作</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> allA = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="language-javascript">            allA[index].<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">&quot;black&quot;</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//4. 对所有的超链接绑定函数</span></span><br><span class="language-javascript">            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i&lt;allA.<span class="hljs-property">length</span> ; i++)&#123;</span><br><span class="language-javascript">					allA[i].<span class="hljs-property">num</span> = i;  <span class="hljs-comment">//超链接绑定自身的索引</span></span><br><span class="language-javascript">					allA[i].<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">						<span class="hljs-built_in">clearInterval</span>(timer);</span><br><span class="language-javascript">						index = <span class="hljs-variable language_">this</span>.<span class="hljs-property">num</span>;</span><br><span class="language-javascript">						<span class="hljs-title function_">setA</span>();</span><br><span class="language-javascript">						<span class="hljs-title function_">move</span>(imgList , <span class="hljs-string">&quot;left&quot;</span> , -<span class="hljs-number">520</span> * index , <span class="hljs-number">20</span> , <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">							<span class="hljs-title function_">autoChange</span>();</span><br><span class="language-javascript">						&#125;);</span><br><span class="language-javascript">						</span><br><span class="language-javascript">					&#125;;</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			  <span class="hljs-title function_">autoChange</span>();</span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript">                 <span class="hljs-comment">//创建一个方法用来设置选中的a</span></span><br><span class="language-javascript">				<span class="hljs-keyword">function</span> <span class="hljs-title function_">setA</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                    </span><br><span class="language-javascript">					<span class="hljs-keyword">if</span>(index &gt;= imgArr.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>)&#123;</span><br><span class="language-javascript">						index = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">						imgList.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">					&#125;</span><br><span class="language-javascript">					<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span> ; i&lt;allA.<span class="hljs-property">length</span> ; i++)&#123;</span><br><span class="language-javascript">						allA[i].<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">&quot;&quot;</span>;</span><br><span class="language-javascript">					&#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">					allA[index].<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">&quot;black&quot;</span>;</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">                <span class="hljs-comment">//自动切换图片</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> timer;</span><br><span class="language-javascript">				<span class="hljs-keyword">function</span> <span class="hljs-title function_">autoChange</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">						index++;</span><br><span class="language-javascript">						index %= imgArr.<span class="hljs-property">length</span>;</span><br><span class="language-javascript">						<span class="hljs-title function_">move</span>(imgList , <span class="hljs-string">&quot;left&quot;</span> , -<span class="hljs-number">520</span>*index , <span class="hljs-number">20</span> , <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">							<span class="hljs-title function_">setA</span>();</span><br><span class="language-javascript">						&#125;);</span><br><span class="language-javascript">						</span><br><span class="language-javascript">					&#125;,<span class="hljs-number">2000</span>);</span><br><span class="language-javascript">					</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- 创建一个外部的div，来作为大的容器 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 创建一个ul，用于放置图片 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;imgList&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/1.jpg&quot;</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/2.jpg&quot;</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/3.jpg&quot;</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/4.jpg&quot;</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/5.jpg&quot;</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img/1.jpg&quot;</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--创建导航按钮--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;navDiv&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<p>hexo博客的地址：<a href="http://xiao_aodi.gitee.io/hexopage/">http://xiao_aodi.gitee.io/hexopage/</a></p>
<p>js学习笔记及练习demo：<a target="_blank" rel="noopener" href="https://github.com/xiaoaodi/Front-Study/tree/master/JavaScript">https://github.com/xiaoaodi/Front-Study/tree/master/JavaScript</a></p>
<p>个人博客地址scdn：<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_46087622?type=blog">https://blog.csdn.net/qq_46087622?type=blog</a></p>
<p>耗时五天，js基本的语法学习计划完成，下面将写demo巩固学习的知识，继续加油！！！</p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
              </div>
              <p class="note note-warning">
                <strong>本文作者: </strong><a href="/HexoPage/">xiao_aodi</a> <br>
                <!-- <strong>本文链接: </strong><a href="http://xiao_aodi.gitee.io/hexopage/2022/03/21/js%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/">http://xiao_aodi.gitee.io/hexopage/2022/03/21/js%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/</a> <br> -->
                <strong>版权声明: </strong>本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                   </p>
                   

              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/HexoPage/2022/03/22/JavaScript%E8%BF%9B%E9%98%B6%E5%AD%A6%E4%B9%A0%E7%9A%84%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript学习巩固基础外加进阶(上)底层原理</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/HexoPage/2022/03/19/js%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">JavaScript学习笔记（第三部分）总共四部分</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  
   <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>  
  <!-- 添加网站运行时间 -->
  <div class="footer-content">
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script>
      var now = new Date();
      function createtime(){
          var grt= new Date("03/10/2022 00:00:00");//此处修改你的建站时间或者网站上线时间
          now.setTime(now.getTime()+250);
          days = (now - grt ) / 1000 / 60 / 60 / 24;
          dnum = Math.floor(days);
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
          hnum = Math.floor(hours);
          if(String(hnum).length ==1 ){
              hnum = "0" + hnum;
          }
          minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
          mnum = Math.floor(minutes);
          if(String(mnum).length ==1 ){
                    mnum = "0" + mnum;
          }
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
          snum = Math.round(seconds);
          if(String(snum).length ==1 ){
                    snum = "0" + snum;
          }
          document.getElementById("timeDate").innerHTML = "🚀 &nbsp"+dnum+"&nbsp天";  //此次自定义显示内容
          document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
      }  //此次自定义显示内容
      setInterval("createtime()",250);
      </script>
    </div>
  </div>
  <!-- 统计访问量信息 -->
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  <!-- 个人和备案信息 -->
  <div>©2022-2023<a target="_blank" rel="noopener" href="https://clearlight.blog.csdn.net/">ClearlightY</a> <a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">冀ICP备19019307号-2</a></div>
   
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/HexoPage/img/police_beian.png" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>




  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>


</body>
</html>
